<template>
  <el-select v-model="chid" placeholder="请选择" clearable>
    <el-option v-for="item in channelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
  </el-select>
</template>

<script>
// 当前子组件拥有名称为slt的事件(是父组件给声明的)
// 对chid做监听(watch/change)，有变化，就调用slt事件，并把chid传递给父组件
export default {
  name: 'ChannelCom',
  // 接收父组件传递过来的数据信息
  props: {
    cid: {
      default: 0// 设置默认值
    }
  },
  watch: {
    // 对cid做监听，使cid的信息被赋予给chid使用
    cid: function (newV, oldV) {
      this.chid = newV
    },
    // 对chid做监听
    chid: function (newV, oldV) {
      // 调用自己的slt方法
      this.$emit('slt', this.chid)
    }
  },
  data () {
    return {
      chid: '', // 记录当前选中的频道信息
      channelList: [] // 接收频道列表数据
    }
  },
  created () {
    // 获得频道列表
    this.getChannelList()
  },
  methods: {
    // 获得频道列表数据
    getChannelList () {
      var pro = this.$http.get('/channels')
      pro
        .then(result => {
          if (result.data.message === 'OK') {
            this.channelList = result.data.data.channels
          }
        })
        .catch(err => {
          return this.$message.error('获得文章频道错误：' + err)
        })
    }
  }
}
</script>

<style lang="less" scoped>
</style>
